<template>
  <!-- 菜品详情 -->
  <view class="menu-details">
    <view class="top">
      <van-call-group>
        <van-field
          :value="form.menuinfo.menu_name"
          clearable
          label="套餐名称"
        ></van-field>
        <van-field
          :value="form.menuinfo.menu_sn"
          clearable
          label="菜谱编号"
        ></van-field>
        <van-field
          :value="form.menuinfo.use_end_time"
          clearable
          label="使用时间"
        ></van-field>
        <van-field
          :value="form.menuinfo.ctype_name"
          clearable
          label="使用类型"
        ></van-field>
        <van-field
          :value="form.menuinfo.foodsname"
          clearable
          label="包含菜名"
        ></van-field>
      </van-call-group>
    </view>
    <view class="content">
      <view class="content-title f26 pl30 fwbold"> 材料配比</view>
      <view class="table">
        <view class="table-box">
          <view class="row disFlex back-color">
            <view class="item-style flexc">菜名</view>
            <view class="item-style flexc">品名</view>
            <view class="item-style flexc">数量</view>
            <view class="item-style flexc">单位</view>
          </view>
          <view class="row disFlex" v-for="(item,index) in form.menumaterialdetailinfo" :key="index">
            <view class="item-style flexc">{{ item.goods_name }}</view>
            <view class="item-style flexc">{{ item.foods_name }}</view>
            <view class="item-style flexc">{{ item.goods_num }}</view>
            <view class="item-style flexc">{{ item.unit_name }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-box flexJC">
      <van-button type="default" @click="goBack">返回</van-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        // goods_name: "2023-08-25(周五)-幼儿园中餐",
        // menu_sn: "200000005",
        // use_type_name: "老师",
        // menu_foods_name: "西红柿鸡蛋,青椒炒肉",
        goods_name: "",
        menu_sn: "",
        use_type_name: "",
        menu_foods_name: "",
        menuinfo: {}, //套餐明细
        menumaterialdetailinfo:[],//材料配比
      },
      menu_sn: "", //套餐编号
    };
  },
  onLoad(options) {
    this.menu_sn = options.menu_sn;
  },
  methods: {
    /*获取套餐菜品详情信息*/ 
    async getOutMenudetail() {
      let res = await this.$ajax.outMenudetail({
        menu_sn: this.menu_sn,
      });
      if (res.code == 1) {
        this.form.menuinfo = res.data.menuinfo
        this.form.menumaterialdetailinfo = res.data.menumaterialdetailinfo;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*返回*/ 
    goBack() {
      uni.navigateBack({
        delta: 1, //返回上一级页面
      });
    },
  },

  mounted() {
    this.getOutMenudetail(); //获取套餐信息
  },
};
</script>

<style lang="scss" >
.menu-details {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background: rgba(244, 244, 244, 1);
  padding-bottom: 100rpx;
  .top {
  }
  .content {
    .content-title {
      line-height: 100rpx;
      color: rgba(153, 153, 153, 1);
      font-family: SourceHanSansSC-regular;
    }
    .table {
      width: 100%;
      background: #ffffff;
      .table-box {
        width: 85%;
        margin: 0 auto;
        padding: 20rpx 0rpx 30rpx 0rpx;
        .item-style {
          width: 25%;
          padding: 10px;
          word-break: break-all;
          border-right: 1px solid #ccc;
        }
        .row {
          display: flex;
          border: 1px solid #ccc;
        }
        .back-color {
          background: #cdcccc;
        }
      }
    }
  }
  .btn-box {
    margin-top: 52rpx;
   
    .van-button {
      width: 180rpx;
      height: 72rpx;
      border-radius: 66rpx;
      border: 0.5rpx solid rgba(187, 187, 187, 1);
      color: rgba(102, 102, 102, 1);
      font-family: Microsoft Yahei;
    }
  }
}
</style>